<template>
    <main class="page-bg" id="canvasDom">
        <n-flex vertical justify="flex-start">
            <header class="header">
                <section class="head-right" data-html2canvas-ignore="true">
                    <ScreenshotKit :downloadName="'大数据可视化系统分析'" />
                </section>
                <header class="head-center">大数据可视化系统分析</header>
                <section class="head-left">
                    <span>{{today}}</span>
                </section>
            </header>

            <main class="main-content">
                <n-grid x-gap="12" :cols="3">
                    <!-- left -->
                    <n-gi>
                        <n-flex vertical :align="'center'">
                            <section class="left-first">
                                <n-grid x-gap="8" :cols="3">
                                    <n-gi>
                                        <section class="left-small-box flex-center">
                                            <Business class="left-icon" />
                                            <n-flex vertical :warp="true" class="left-text" style="gap: 8px -2px;">
                                                <span>进驻企业</span>
                                                <span>200户</span>
                                            </n-flex>
                                        </section>
                                    </n-gi>
                                    <n-gi>
                                        <section class="left-small-box flex-center">
                                            <Person class="left-icon" />
                                            <n-flex vertical :warp="true" class="left-text" style="gap: 8px -2px;">
                                                <span>总人数</span>
                                                <span>4200人</span>
                                            </n-flex>
                                        </section>
                                    </n-gi>
                                    <n-gi>
                                        <section class="left-small-box flex-center">
                                            <Home class="left-icon" />
                                            <n-flex vertical :warp="true" class="left-text" style="gap: 8px -2px;">
                                                <span>大型企业</span>
                                                <span>50家</span>
                                            </n-flex>
                                        </section>
                                    </n-gi>
                                </n-grid>
                            </section>
                            <section class="left-second">
                                <n-flex justify="space-between" v-for="(item, i) in progressList" :key="i" style="margin-bottom: 16px;
                                ">
                                    <section>
                                        <span>{{item.name}}</span>
                                        <n-progress
                                            type="line"
                                            indicator-placement="outside"
                                            :stroke-width="10"
                                            :percentage="item.ratio"
                                            :color="'#39b4f6'"
                                            :rail-color="'#021d56'"
                                            :indicator-text-color="'#f7f035'"
                                            style="border: 1px solid #35659b; border-radius: 20px; padding: 0 4px;"
                                        />
                                    </section>
                                    <section>
                                        <span>同比</span>
                                        <span class="flex-center" style="height: 20px;">
                                            <n-gradient-text gradient="linear-gradient(to right, #39b4f6, #7de0fe, #ffffff)" :size="20">{{item.pace}}</n-gradient-text>
                                            <n-gradient-text gradient="linear-gradient(to right, #39b4f6, #7de0fe, #ffffff)" :size="12" style="margin-top: 5px;">%</n-gradient-text>
                                            <ArrowUp class="left-icon2" v-if="item.state ===  'up'" />
                                            <ArrowDown class="left-icon3" v-if="item.state ===  'down'" />
                                        </span>
                                    </section>
                                </n-flex>
                            </section>
                            <section class="section-chart">
                                <p class="flex-start"><span></span>进驻统计</p>
                                <LineArea v-if="canvasShow" :canvasHeight="345" :data="lineAreaData" />
                            </section>
                        </n-flex>
                    </n-gi>
                    <!-- center -->
                    <n-gi>
                        <n-flex vertical :align="'center'">
                            <section class="left-first">
                                <n-grid x-gap="8" :cols="2">
                                    <n-gi class="total flex-start is-warp">
                                        <span>业绩总览</span>
                                        <p>198,383,281</p>
                                    </n-gi>
                                    <n-gi>
                                        <n-grid x-gap="4" :cols="2" style="padding: 10px;">
                                            <n-gi><n-progress type="circle" :percentage="80" :offset-degree="120"
                                                :color="'#e8405f'"
                                                :indicator-text-color="'#ffffff'"
                                                :rail-color="'#4abfeb'" /></n-gi>
                                            <n-gi><n-progress type="circle" :percentage="60" :offset-degree="120" 
                                                :color="'#f0f23e'" 
                                                :indicator-text-color="'#ffffff'"
                                                :rail-color="'#4abfeb'" /></n-gi>
                                        </n-grid>
                                    </n-gi>
                                </n-grid>
                            </section>
                            <section class="left-second">
                                <Bars v-if="canvasShow" :canvasHeight="340" :data="barsData"  />
                            </section>
                            <section class="section-chart">
                                <p class="flex-start"><span></span>人员情况</p>
                                <LineAreaTwo v-if="canvasShow" :canvasHeight="260" :data="lineAreaTwoData" />
                            </section>
                        </n-flex>
                    </n-gi>
                    <!-- right -->
                    <n-gi>
                        <n-flex vertical :align="'center'">
                            <section class="left-first">
                                <n-grid x-gap="8" :cols="3">
                                    <n-gi>
                                        <section class="right-small-box flex-center">
                                            <Business class="left-icon" />
                                            <n-flex vertical :warp="true" class="left-text" style="gap: 8px -2px;">
                                                <span>进驻企业</span>
                                                <span>200户</span>
                                            </n-flex>
                                        </section>
                                    </n-gi>
                                    <n-gi>
                                        <section class="right-small-box flex-center">
                                            <Person class="left-icon" />
                                            <n-flex vertical :warp="true" class="left-text" style="gap: 8px -2px;">
                                                <span>总人数</span>
                                                <span>4200人</span>
                                            </n-flex>
                                        </section>
                                    </n-gi>
                                    <n-gi>
                                        <section class="right-small-box flex-center">
                                            <Home class="left-icon" />
                                            <n-flex vertical :warp="true" class="left-text" style="gap: 8px -2px;">
                                                <span>大型企业</span>
                                                <span>50家</span>
                                            </n-flex>
                                        </section>
                                    </n-gi>
                                </n-grid>
                            </section>
                            <section class="section-chart">
                                <p class="flex-start"><span></span>人员来源</p>
                                <Radar v-if="canvasShow" :canvasHeight="280" :data="radarData"  />
                            </section>
                            <section class="section-chart">
                                <p class="flex-start"><span></span>排行榜</p>
                                <section class="ranking flex-start" v-for="(item, i) in progressData" :key="i">
                                    <span :style="{'background-color': item.color}">{{i+1}}</span>
                                    <section class="flex-start is-warp rank-pro">
                                        <p>{{item.nnme}}</p>
                                        <n-progress type="line" :percentage="item.radio" :show-indicator="true" 
                                        :color="item.color"
                                        :rail-color="'#eef3de'"
                                        :indicator-text-color="'#f7f035'" />
                                    </section>
                                </section>
                            </section>
                        </n-flex>
                    </n-gi>
                </n-grid>
            </main>
        </n-flex>
    </main>

</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { createPinia } from 'pinia'
import { Business, Person, Home, ArrowUp, ArrowDown} from '@vicons/ionicons5'
import { DATEFORMAT } from '@/tools/GrobalTools'
import { useThemeVars } from 'naive-ui'
import LineArea from '@/components/charts4/LineArea.vue';
import LineAreaTwo from '@/components/charts4/LineAreaTwo.vue';
import Bars from '@/components/charts4/Bars.vue';
import Radar from '@/components/charts4/Radar.vue';
import { useChartsStore } from '@/stores/charts';
import ScreenshotKit from '@/components/common/ScreenshotKit.vue';
const pinia = createPinia();
const chartStore = useChartsStore(pinia)
const colors = chartStore.colors
const today = ref(DATEFORMAT(new Date().getTime(), 'yyyy年MM月dd日 HH:mm:ss'))
const themeVars = useThemeVars()
let progressList = reactive(<Array<object>>[])

const max = 2000
const min = 1
let canvasShow = ref(false) 
let lineAreaData = reactive({
    xAxisDataList: [],
    seriesDataList: [] 
})
let lineAreaTwoData = reactive({
    xAxisDataList: <Array<string>>[],
    seriesDataList: <Array<object>>[] 
})
let barsData = reactive({
    xAxisDataList: <Array<string>>[],
    seriesDataList: <Array<object>>[] 
})
let radarData = reactive({
    indicatorDataList: <Array<object>>[],
    seriesDataList: <Array<object>>[] 
})
let progressData = reactive(<Array<object>>[])

const init = () => {
    let list = [], list1 = [], list2 = [], plist = []
    progressList = [
        { name: "微型企业占比", pace: "30", ratio: "50", state: "up" },
        { name: "小型企业占比", pace: "80", ratio: "80", state: "up" },
        { name: "中型企业占比", pace: "20", ratio: "35", state: "up" },
        { name: "大型企业占比", pace: "10", ratio: "17", state: "down" },
        { name: "超大型企业占比", pace: "10", ratio: "28", state: "down" },
    ]

    for (let index = 0; index < 12; index++) {
        let num = Math.floor(Math.random() * (max - min + 1)) + min;
        let num1 = Math.floor(Math.random() * (100 - min + 1)) + min;
        lineAreaTwoData.xAxisDataList.push((index+1)+'月')
        lineAreaData.xAxisDataList.push((index+1)+'月')
        barsData.xAxisDataList.push((index+1)+'月')
        list.push(num)
        list1.push(num*1.25)
        list2.push(num*1.85)

        if (index < 8) {
            plist.push({ name: 'xxxxx科技公司'+ index, radio: num1, color: colors[index/2]})
        }
    }

    lineAreaData.seriesDataList = list
    lineAreaTwoData.seriesDataList = [
        { name: "流入人数", data: list },
        { name: "流出人数", data: list1 },
    ]
    barsData.seriesDataList = [
        { name: "小型企业", data: list },
        { name: "中型企业", data: list1 },
        { name: "大型企业", data: list2 },
    ]
    radarData.indicatorDataList = [
        { text: '智联招聘', max: 150 },
        { text: '前程无忧', max: 150 },
        { text: '拉勾', max: 150 },
        { text: 'Boss直聘', max: 120 },
        { text: '58同城', max: 108 },
        { text: '赶集网', max: 72 }
    ]
    radarData.seriesDataList = [
        { name: '直投',value: [120, 118, 130, 100, 99, 70] },
        { name: '内推',value: [100, 93, 50, 90, 70, 60] },
    ]
    progressData.push(...plist)
    canvasShow.value = true
}
init()

</script>

<style scoped>
.page-bg {
    width: 100%;
    min-height: 100vh;
    background-color: #000d3a;
}
.header {
    width: 100%;
    height: 50px;
    border: 1px solid #0000ff;
    color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #0f2860;
}
.head-left {
    width: 33%;
    text-align: right;
}
.head-left span {
    display: inline-block;
    text-align: center;
    margin: 0 20px;
}
.head-center {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 4px;
    width: 33%;
    text-align: center;
}
.head-right {
    width: 33%;
    text-align: left;
}
.main-content {
    margin: 10px;
}
.left-first {
    width: 100%;
    padding: 10px;
    background-color: #041b54;
    box-sizing: border-box;
}
.left-small-box {
    margin: 10px 5px;
    margin-right: 0;
    padding: 10px;
    background-color: #023e82;
    border: 1px solid #35659b;
    border-radius: 0 20px;
}
.right-small-box {
    margin: 10px 5px;
    margin-right: 0;
    padding: 10px;
    /* background-color: #023e82; */
    border: 1px solid #35659b;
    border-radius: 4px;
}
.left-icon {
    width: 30px;
    height: 30px;
    color: #ffffff;
    margin-right: 10px;
}
.left-icon2 {
    width: 18px;
    height: 45px;
    color: #0dfbd2;
}
.left-icon3 {
    width: 18px;
    height: 45px;
    color: #f04223;
}
.left-text span:first-child {
    color: #ffffff;
    font-size: 14px;
}
.left-text span:last-child {
    color: #fdff1c;
    font-size: 20px;
}
.left-second {
    width: 100%;
    /* height: 16vh; */
    padding: 10px;
    color: #ffffff;
    background-color: #041b54;
}
.left-second section:first-child {
    width: 75%;
}
.left-second section:last-child {
    width: 20%;
    height: 20px;
    text-align: center;
}
.left-second section:first-child span,
.left-second section:last-child span {
    font-size: 12px;
    padding: 4px;
}
.section-chart {
    width: 100%;
    padding: 10px;
    background-color: #041b54;
}
.section-chart p {
    width: 100%;
    color: #ffffff;
    font-size: 12px;
    text-align: left;
}
.section-chart p span{
    width: 6px;
    height: 12px;
    display: inline-block;
    background-color: #7de0fe;
    margin-right: 10px;
}
.ranking {
    width: 100%;
    margin: 20px 0;
}
.ranking span {
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #ffffff;
    background-color: #7de0fe;
    margin-right: 6px;
    text-align: center;
}
.rank-pro {
    width: 100%;
}
.rank-pro p {
    width: 100%;
    font-size: 12px;
}
.total {
    margin: 10px;
}
.total span {
    width: 100%;
    color: #ffffff;
    font-size: 14px;
}
.total p:last-child {
    width: 100%;
    color: #e9f422;
    font-size: 34px;
}
</style>
  